<template>
    <div class="recommed-pic">
       <img src="../../assets/img/pic2.png">
      <div class="bottom">
        <p class="intro">
          2018年新款紫色系列的性感海边沙滩比基尼热销泳衣
        </p>
        <div class="money">
          <div class="price">￥<span>299.0</span>起</div>
          <span>原价300.0起</span>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: 'recommend'
    }
</script>

<style scoped>
.recommed-pic{
  width:354px ;
  height: 528px;
  position: relative;
}
  .recommed-pic>img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .bottom{
    position: absolute;
    height: 68px;
    width: 314px;
    padding: 16px 20px 16px 20px;
    bottom: 0;
    background: rgba(43,48,64,0.6);
  }
  .intro{
    font-size: 16px;
    color: #fff;
    font-family: "Microsoft YaHei";
    line-height: 23px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 46px;
  }
.money{
  margin-top:0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.price>span{
  font-size: 18px;
  font-weight: bold;
  color: #fbc702;
  padding-left: 10px;
  padding-right: 10px;

}
.money>span{
  font-size: 12px;
  color: #a6a9b2;
  margin-left: 10px;
  text-decoration: line-through;
}
</style>
